<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Debug Test</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .container { display: flex; gap: 20px; }
        .client { border: 1px solid #ccc; padding: 15px; width: 45%; }
        .messages { height: 300px; overflow-y: auto; border: 1px solid #eee; padding: 10px; margin: 10px 0; background: #f9f9f9; }
        input, button { margin: 5px; padding: 5px; }
        textarea { width: 100%; height: 100px; }
    </style>
</head>
<body>
    <h1>WebSocket 协同编辑调试</h1>
    
    <div class="container">
        <!-- 客户端1 (模拟topic页面) -->
        <div class="client">
            <h3>客户端1 (模拟Topic页面)</h3>
            <input type="text" id="userId1" placeholder="用户ID" value="user_test1">
            <input type="number" id="docId1" placeholder="文档ID" value="4">
            <button onclick="connect1()">连接</button>
            <button onclick="disconnect1()">断开</button>
            <br>
            <textarea id="content1" placeholder="编辑内容..."></textarea>
            <button onclick="sendUpdate1()">发送更新</button>
            <div class="messages" id="messages1"></div>
        </div>
        
        <!-- 客户端2 (模拟editor页面) -->
        <div class="client">
            <h3>客户端2 (模拟Editor页面)</h3>
            <input type="text" id="userId2" placeholder="用户ID" value="user_test2">
            <input type="number" id="docId2" placeholder="文档ID" value="4">
            <button onclick="connect2()">连接</button>
            <button onclick="disconnect2()">断开</button>
            <br>
            <textarea id="content2" placeholder="编辑内容..."></textarea>
            <button onclick="sendUpdate2()">发送更新</button>
            <div class="messages" id="messages2"></div>
        </div>
    </div>

    <script>
        let socket1, socket2;

        function log(clientId, message) {
            const messagesDiv = document.getElementById(`messages${clientId}`);
            const time = new Date().toLocaleTimeString();
            messagesDiv.innerHTML += `[${time}] ${message}<br>`;
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }

        function connect1() {
            const userId = document.getElementById('userId1').value;
            const docId = parseInt(document.getElementById('docId1').value);
            
            socket1 = new WebSocket('ws://localhost:3000');
            
            socket1.onopen = () => {
                log(1, '已连接到WebSocket服务器');
                // 发送用户加入消息
                socket1.send(JSON.stringify({
                    type: 'user-join',
                    user: {
                        id: userId,
                        name: '测试用户1',
                        color: '#FF0000',
                        documentId: docId,
                        status: 'viewing',
                        lastActive: new Date()
                    }
                }));
            };
            
            socket1.onmessage = (event) => {
                const data = JSON.parse(event.data);
                log(1, `收到消息: ${JSON.stringify(data)}`);
                
                if (data.type === 'document-update' && data.documentId === docId) {
                    document.getElementById('content1').value = data.content;
                    log(1, '已更新内容');
                }
            };
            
            socket1.onclose = () => log(1, '连接已断开');
            socket1.onerror = (error) => log(1, `连接错误: ${error}`);
        }

        function connect2() {
            const userId = document.getElementById('userId2').value;
            const docId = parseInt(document.getElementById('docId2').value);
            
            socket2 = new WebSocket('ws://localhost:3000');
            
            socket2.onopen = () => {
                log(2, '已连接到WebSocket服务器');
                // 发送用户加入消息
                socket2.send(JSON.stringify({
                    type: 'user-join',
                    user: {
                        id: userId,
                        name: '测试用户2',
                        color: '#00FF00',
                        documentId: docId,
                        status: 'viewing',
                        lastActive: new Date()
                    }
                }));
            };
            
            socket2.onmessage = (event) => {
                const data = JSON.parse(event.data);
                log(2, `收到消息: ${JSON.stringify(data)}`);
                
                if (data.type === 'document-update' && data.documentId === docId) {
                    document.getElementById('content2').value = data.content;
                    log(2, '已更新内容');
                }
            };
            
            socket2.onclose = () => log(2, '连接已断开');
            socket2.onerror = (error) => log(2, `连接错误: ${error}`);
        }

        function sendUpdate1() {
            if (socket1 && socket1.readyState === WebSocket.OPEN) {
                const content = document.getElementById('content1').value;
                const docId = parseInt(document.getElementById('docId1').value);
                
                socket1.send(JSON.stringify({
                    type: 'document-update',
                    content: content,
                    documentId: docId
                }));
                log(1, `发送更新: docId=${docId}, content="${content.substring(0, 50)}..."`);
            }
        }

        function sendUpdate2() {
            if (socket2 && socket2.readyState === WebSocket.OPEN) {
                const content = document.getElementById('content2').value;
                const docId = parseInt(document.getElementById('docId2').value);
                
                socket2.send(JSON.stringify({
                    type: 'document-update',
                    content: content,
                    documentId: docId
                }));
                log(2, `发送更新: docId=${docId}, content="${content.substring(0, 50)}..."`);
            }
        }

        function disconnect1() {
            if (socket1) socket1.close();
        }

        function disconnect2() {
            if (socket2) socket2.close();
        }
    </script>
</body>
</html>